import React, { useEffect } from 'react';
import './Main.scss'
import { AudioOutlined } from '@ant-design/icons';
import { Input, Space, Tabs } from 'antd';
import type { TabsProps } from 'antd';
import img1 from '../../tu/1.png'
import img2 from '../../tu/2.png'
import img3 from '../../tu/3.png'
import img4 from '../../tu/4.png'
import img5 from '../../tu/5.png'
import img6 from '../../tu/a1.png'
import img7 from '../../tu/a2.png'
import img8 from '../../tu/a3.png'
import img9 from '../../tu/a4.png'
import img10 from '../../tu/a5.png'
import img11 from '../../tu/a6.png'
import img12 from '../../tu/a7.png'
import img13 from '../../tu/a8.png'
import img14 from '../../tu/a9.png'
import img15 from '../../tu/a10.png'
import img16 from '../../tu/a11.png'
import img17 from '../../tu/a12.png'
import img18 from '../../tu/a13.png'
import img19 from '../../tu/a14.png'

interface props {

}
//头部右边

const onChange = (key: string) => {
  console.log(key);
};
const items: TabsProps['items'] = [
  {
    key: '1',
    label: `个人服务`,
    children: <ul>
      <li>
        公务员报告
      </li>
      <li>
        社保查询
      </li>
      <li>
        人才引进
      </li>
      <li>就业补贴</li>
      <li>公积金查询</li>
      <li>汽车摇号</li>
      <li>基层就业补贴</li>
      <li>毕业生就业</li>
    </ul>,
  },
  {
    key: '2',
    label: `法人服务`,
    children: <ul><li>企业开办</li>
      <li>企业变更登记</li>
      <li>人才引进</li>
      <li>就业补贴</li>
      <li>公积金查询</li>
      <li>汽车摇号</li>
      <li>基层就业补贴</li>
      <li>毕业生就业</li>
    </ul>,
  },

];
//个人服务
const items_self: TabsProps['items'] = [
  {
    key: '1',
    label: `个人服务`,
    children: <div className='self_small'>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img6} alt="" />
          <h2>社保</h2>
        </div>
        <p>城乡居民养老保险参保登记</p>
        <p>个体劳动者参保登记</p>
        <p>参保人员达到法定退休年龄</p>
      </div>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img7} alt="" />
          <h2>公积金</h2>
        </div>
        <p>住房提供住房公积金</p>
        <p>离、退休提取住房公积金</p>
        <p>享受低保住房公积金</p>
      </div>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img8} alt="" />
          <h2>人才引进/落户</h2>
        </div>
        <p>投资创业、引进人才居住证办理</p>
        <p>人才引进落户</p>
        <p>国家创新人才推进计划项目</p>
      </div>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img9} alt="" />
          <h2>户政</h2>
        </div>
        <p>开具户籍证明</p>
        <p>人才引进</p>
        <p>出生登记</p>
      </div>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img10} alt="" />
          <h2>职业资格</h2>
        </div>
        <p>律师事务所设立许可</p>
        <p>高等学校教师资格认定</p>
        <p>中医医疗机构医师职业资格认定</p>
      </div>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img11} alt="" />
          <h2>教育服务</h2>
        </div>
        <p>省内学校查询</p>
        <p>高等教育学籍查询</p>
        <p>参四六级查询</p>
      </div>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img12} alt="" />
          <h2>税务</h2>
        </div>
        <p>发票查询</p>
        <p>开具个人所得税纳税证明</p>
        <p>个人所得税申报记录查询</p>
      </div>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img13} alt="" />
          <h2>水电气</h2>
        </div>
        <p>用水报装/变更</p>
        <p>用电报装/变更</p>
        <p>燃气报装/变更</p>
      </div>
    </div>,
  },
  {
    key: '2',
    label: `法人服务`,
    children: <div className='self_small'>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img6} alt="" />
          <h2>职工社保</h2>
        </div>
        <p>职工参保登记</p>
        <p>稳岗返还申领</p>
        <p>单位参保证明查询打印</p>
      </div>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img7} alt="" />
          <h2>职工公积金</h2>
        </div>
        <p>住房公积金基数调整</p>
        <p>单位住房公积金缴存登记</p>
        <p>单位住房公积金降低缴存比例</p>
      </div>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img14} alt="" />
          <h2>企业开办</h2>
        </div>
        <p>公司设立登记</p>
        <p>企业登记全程电子化平台</p>
        <p>营业单位及非法人分支机构开业登记</p>
      </div>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img15} alt="" />
          <h2>企业经营</h2>
        </div>
        <p>省重点建设项目招投标合同</p>
        <p>创业投资企业备案</p>
        <p>公共场所卫生许可</p>
      </div>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img16} alt="" />
          <h2>企业变更</h2>
        </div>
        <p>非公司企业法人变更登记</p>
        <p>分公司变更登记</p>
        <p>公司变更登记</p>
      </div>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img17} alt="" />
          <h2>企业注销</h2>
        </div>
        <p>分公司注销登记</p>
        <p>个体工商户注销登记</p>
        <p>公司注销登记</p>
      </div>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img18} alt="" />
          <h2>境外投资备案</h2>
        </div>
        <p>境外投资备案</p>

      </div>
      <div className='self_sb'>
        <div className='self_tu'>
          <img src={img19} alt="" />
          <h2>福利补贴</h2>
        </div>
        <p>小微企业设备补贴申领</p>
        <p>企业吸纳社会保险补贴</p>
        <p>创业带动就业补贴</p>
      </div>
    </div>,
  },
];

//input
const { Search } = Input;
const suffix = (
  <AudioOutlined
    style={{
      fontSize: 16,
      color: '#1890ff',
    }}
  />
);

const onSearch = (value: string) => console.log(value);
function Login(props: props) {

  useEffect(() => {
    //实例化地图
    var map = new window.BMapGL.Map("container");
    //实例化一个点( 设置中心点坐标 )
    var point = new window.BMapGL.Point(108.882665, 34.223736);
    //地图初始化，同时设置地图展示级别
    map.centerAndZoom(point, 10);

  }, [])
  return (
    <div className='index'>
      <div className='center'>
        <div className='blue'>
          <div className='a1'>
            <div className='b1'>
              全国一体化在线政务服务平台
            </div>
            <div className='b2'>
              ××政务服务网
            </div>
            <Search
              placeholder="政务服务网上办事"
              allowClear
              enterButton="搜索"
              size="large"
              onSearch={onSearch}
            />
            <div className='b3'>
              <div className='c1'>
                热门搜索：
              </div>
              <button>营业执照</button>
              <button>公务员</button>
              <button>特种设备</button>
            </div>
          </div>

          <div className='a2'>
            <div className='d1'>
              <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
            </div>
          </div>
        </div>
        <div className='specil'>
          <div className='specil1'>
            <h1>特色创新</h1>
            <div className='tu'>
              <img src={img1} alt="" />
              <img src={img2} alt="" />
              <img src={img3} alt="" />
              <img src={img4} alt="" />
              <img src={img5} alt="" />
            </div>
          </div>
        </div>
        <div className='self'>
          <div className='self_fw'>
            <Tabs defaultActiveKey="1" items={items_self} onChange={onChange} size='large' tabPosition="top" animated={{ inkBar: false, tabPane: true }} />
          </div>
        </div>
        <div className='thing'>
          <h1>“一件事一次办”主题集成服务</h1>
          <div className='thing_do'>
            <div className='card'>
              <h3>出生一件事联办</h3>
              <p>参保登记、户口登记、出生医学证明、实体社会保障卡申领等</p>
              <div className='button'>
                <button>办事指南</button>
                <button>在线办理</button>
              </div>
            </div>
            <div className='card'>
              <h3>就业一件事联办</h3>
              <p>灵活就业登记、实体社会保障卡申领、职工参保登记等</p>
              <div className='button'>
                <button>办事指南</button>
                <button>在线办理</button>
              </div>
            </div>
            <div className='card'>
              <h3>出生一件事联办</h3>
              <p>市内夫妻投靠落户、市外夫妻投靠落户、婚姻状况变更、生育登记等</p>
              <div className='button'>
                <button>办事指南</button>
                <button>在线办理</button>
              </div>
            </div>
            <div className='card'>
              <h3>出生一件事联办</h3>
              <p>重度残疾人护理补贴资格认定、首次申领《中华人民共和国残疾人证等》</p>
              <div className='button'>
                <button>办事指南</button>
                <button>在线办理</button>
              </div>
            </div>

          </div>
        </div>
        <div className='map'>
          <div className='map_center'>
            <h1>线下站点</h1>
            <div className='map_map'>
              {/* 空的容器,必须有大小 */}
              <div id="container" style={{ height: '400px', width: '100%' }}></div>
              <div className='zi'>
                <h2>办事网点</h2>
                <div className='one'>
                  <h4>陕西省西安市行政服务中心</h4>
                  <p>碑林区雁塔路中段17A号心晴雅苑3号楼3-2F</p>
                  <p>夏季：上午9:00-12:00，下午13:00-17:00；冬季：上午9:00-12:00，下午14:00-17:00</p>

                  <h4>陕西省西安市行政服务中心</h4>
                  <p>西安市灞桥区穆将王街1号</p>
                  <p>夏季：上午9:00-12:00，下午13:00-17:00；冬季：上午9:00-12:00，下午14:00-17:00</p>

                  <h4>陕西省安康市人民政府驻西安办事处</h4>
                  <p>陕西省西安市莲湖区丰庆路101号</p>
                  <p>夏季：上午9:00-12:00，下午13:00-17:00；冬季：上午9:00-12:00，下午14:00-17:00</p>
                </div>
              </div>

            </div>

          </div>
        </div>


        <div className='thing'>
          <h1>政策咨询</h1>
          <div className='thing_do'>
            <div className='card'>
              <h3>2022年政府工作报告</h3>
              <span>2023-02-23 11：58：59</span>

            </div>
            <div className='card'>
              <h3>就业一件事联办</h3>
              <span>2023-02-23 11：58：59</span>
            </div>
            <div className='card'>
              <h3>出生一件事联办</h3>
              <span>2023-02-23 11：58：59</span>
            </div>
            <div className='card'>
              <h3>出生一件事联办</h3>
              <span>2023-02-23 11：58：59</span>
            </div>

          </div>
        </div>
      </div>
    </div>

  );
}

export default Login;